<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      小米商城 - 小米10 Pro、Redmi Note 9、小米MIX Alpha，小米电视官方网站
    </title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <!-- 引入icon图标 -->
    <link rel="stylesheet" href="lib/yidongduan/iconfont.css" />
    <link rel="stylesheet" href="lib/swiper-5.4.5/package/css/swiper.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="css/fix_the_right_side.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <!--TODO:头部 -->
    <div class="header">
      <!--头部顶部背景图 -->
      <div class="header_top_img">
        <a href="#"></a>
      </div>
    </div>
    <!-- TODO:轮播图 -->
    <div class="banner">
      <div class="container">
        <!-- banner上方 -->
        <div class="banner_top">
          <!-- 轮播图 -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="banner_img">
                  <img
                    src="images/index/d00e132d1b4fd7a796b35bcfe54bc2c8.webp"
                    alt=""
                  />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="banner_img">
                  <img
                    src="images/index/0ef4160c861b998239bce9adb82341e7.jpg"
                    alt=""
                  />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="banner_img">
                  <img
                    src="images/index/b13d6f490df3a208138e1de587968722.jpg"
                    alt=""
                  />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="banner_img">
                  <img
                    src="images/index/d01b4f4d20d1c909454b296f34143004.webp"
                    alt=""
                  />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="banner_img">
                  <img
                    src="images/index/ec39b7eb802279eb693520915afdfa07.webp"
                    alt=""
                  />
                </a>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
          <!-- banner下方 -->
          <div class="banner_bottom">
            <div class="banner_bottom_left">
              <ul>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (6).png" alt="" />
                    小米秒杀
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (5).png" alt="" />
                    企业团购
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (2).png" alt="" />
                    F码通道
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (4).png" alt="" />
                    米粉卡
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (1).png" alt="" />
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/index/banner_bottom_left (3).png" alt="" />
                    话费充值
                  </a>
                </li>
              </ul>
            </div>
            <div class="banner_bottom_right">
              <ul>
                <li>
                  <a href="#">
                    <img
                      src="images/index/banner_bottom_right (1).jpg"
                      alt=""
                    />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img
                      src="images/index/banner_bottom_right (2).jpg"
                      alt=""
                    />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img
                      src="images/index/banner_bottom_right (3).jpg"
                      alt=""
                    />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="script">
      <div class="container">
        <!-- 小米闪购 -->
        <div class="iflashbuy">
          <div class="iflashbuy_shopshow">
            <!-- 小米闪购标题 -->
            <div class="iflashbuy_title">
              <h2>小米闪购</h2>
            </div>
            <!-- 展示区域 -->
            <div class="shopshow_show">
              <div class="row">
                <!-- 倒计时 -->
                <div class="count_down">
                  <div class="round">14:00场</div>
                  <img src="images/index/hssd.gif" alt="" />
                  <div class="desc">距离开始还有</div>
                  <div class="countdown">
                    <span class="hour"></span>
                    <i>:</i>
                    <span class="minute"></span>
                    <i>:</i>
                    <span class="second"></span>
                  </div>
                </div>
                <!-- 商品展示 -->
                <div class="shopshow">
                  <div class="swiper-container">
                    <ul class="swiper-wrapper" id="shopshow-swiper">
                      <!-- <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                          <h3 class="exhibition-headline">
                            米家石英表经典版 黑色
                          </h3>
                          <p class="exhibition-introduce">现代与经典融合，时尚与文艺兼具</p>
                          <p class="exhibition-price">
                            <i>169元</i>
                            <del>199元</del>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="swiper-slide">
                      <a href="#">
                        <div class="merchandise">
                          <div class="exhibition">
                            <img src="images/index/xmsg (1).png" alt="">
                          </div>
                        </div>
                      </a>
                    </li> -->
                    </ul>
                    <!-- rap2数据，模板引擎渲染 -->
                    <script type="text/html" id="IflashbuyTemplate">
                      {{each list item }}
                      <li class="swiper-slide">
                        <a
                          href="html/detail-page.html?product_id={{item.product_id}}"
                        >
                          <div class="merchandise">
                            <div class="exhibition">
                              <img src="{{item.pc_img}}" alt="" />
                            </div>
                            <h3 class="exhibition-headline">
                              {{item.goods_name}}
                            </h3>
                            <p class="exhibition-introduce">{{item.desc}}</p>
                            <p class="exhibition-price">
                              <i>{{item.seckill_Price }}</i>
                              <del>{{item.goods_price}}</del>
                            </p>
                          </div>
                        </a>
                      </li>
                      {{/each }}
                    </script>
                  </div>
                </div>
                <!-- 点击按钮 -->
                <div class="swiper-controls">
                  <span class="swiper-button-prev">
                    <i class="iconfont icon-right2"></i>
                  </span>
                  <span class="swiper-button-next">
                    <i class="iconfont icon-left1"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间图片 home—banner -->
        <div class="home_banner">
          <a href="#">
            <img src="images/index/home-banner（1）.webp" alt="" />
          </a>
        </div>
        <!-- 手机 -->
        <div class="cellphone">
          <div class="cellphone-title">
            <h2>手机</h2>
            <div class="look_at_all">
              <a href="#">
                查看全部
                <i class="iconfont icon-right2"></i>
              </a>
            </div>
          </div>
          <div class="cellphone-show">
            <div class="cellphone-show-left">
              <ul>
                <li class="shadows">
                  <a href="https://www.mi.com/mixalpha">
                    <img src="images/index/cellphone-show-left.webp" alt="" />
                  </a>
                </li>
              </ul>
            </div>
            <div class="cellphone-show-right">
              <ul id="cellphone">
                <!-- <li class="shadows">
                  <a href="#">
                    <div class="merchandise">
                      <div class="exhibition">
                        <img src="images/index/xmsg (1).png" alt="" />
                      </div>
                      <h3 class="exhibition-headline">米家石英表经典版 黑色</h3>
                      <p class="exhibition-introduce">
                        现代与经典融合，时尚与文艺兼具
                      </p>
                      <p class="exhibition-price">
                        <i>169元</i>
                      </p>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div></div>
                  </a>
                </li> -->
              </ul>
              <script type="text/html" id="cellphone-LI">
                {{each list item}}
                <li class="shadows ">
                  <a
                    href="html/detail-page.html?product_id={{item.product_id}}"
                  >
                    <div class="merchandise">
                      <div class="exhibition">
                        <img src="{{item.pc_img}}" alt="" />
                      </div>
                      <h3 class="exhibition-headline">{{item.goods_name}}</h3>
                      <p class="exhibition-introduce">{{item.desc}}</p>
                      <p class="exhibition-price">
                        <i>{{item.goods_price}}</i>
                      </p>
                    </div>
                  </a>
                </li>
                {{/each}}
              </script>
            </div>
          </div>
        </div>
        <!-- 中间图片 -->
        <div class="home_banner">
          <a href="#">
            <img src="images/index/home-banner（2）.webp" alt="" />
          </a>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="footer"></div>
    <!-- 固定右边内容 -->
    <div class="fix_the_right_side"></div>
    <!-- js -->
    <script src="lib/swiper-5.4.5/package/js/swiper.min.js"></script>
    <script src="lib/requirejs/require.min.js" data-main="js/index"></script>
    <script>
      var mySwiper = new Swiper(".banner_top .swiper-container", {
        direction: "horizontal", // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true, //自动切换
        // 如果需要分页器
        pagination: {
          el: ".banner_top .swiper-pagination",
          clickable: true,
          clickableClass: "my-pagination-clickable",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".banner_top .swiper-button-next",
          prevEl: ".banner_top .swiper-button-prev",
        },
      });
    </script>
    <script>
      var swiper = new Swiper(".shopshow .swiper-container", {
        slidesPerView: 4,
        spaceBetween: 30,
        slidesPerGroup: 4,
        loop: false,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".shopshow .swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".shopshow .swiper-button-next",
          prevEl: ".shopshow .swiper-button-prev",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-controls .swiper-button-prev",
          prevEl: ".swiper-controls .swiper-button-next",
        },
      });
    </script>
  </body>
</html>
